<template>
    <div>
<van-nav-bar title="标题" left-text="返回" left-arrow>
  <template #right>
    <van-icon name="search" size="18" />
  </template>
</van-nav-bar>
<van-tabs v-model="active">
  <van-tab title="综合排序">
    <ul>
       <li>
            <div><img src="../assets/avatar/1.jpg" alt=""></div>
            <div class="tow">
                <h3> &nbsp; &nbsp;小麦胚芽蒜香面包1</h3>
                <h6 style="margin: 10px 0 10px 0;">&nbsp; &nbsp; 小麦粉 麦芽 牛奶 牛奶 牛奶 牛奶1</h6>
                <p style="font-size: 12px; margin: 10px 0 10px 0;">&nbsp; &nbsp; 小麦胚芽蒜香面包1</p>
                <p style="font-size: 14px;">&nbsp; &nbsp; 182人做过 &nbsp; &nbsp;  65人收藏</p>
            </div>
        </li>
       <li>
            <div><img src="../assets/avatar/1.jpg" alt=""></div>
            <div class="tow">
                <h3> &nbsp; &nbsp;小麦胚芽蒜香面包1</h3>
                <h6 style="margin: 10px 0 10px 0;">&nbsp; &nbsp; 小麦粉 麦芽 牛奶 牛奶 牛奶 牛奶1</h6>
                <p style="font-size: 12px; margin: 10px 0 10px 0;">&nbsp; &nbsp; 小麦胚芽蒜香面包1</p>
                <p style="font-size: 14px;">&nbsp; &nbsp; 182人做过 &nbsp; &nbsp;  65人收藏</p>
            </div>
        </li>
    </ul>
    
    
    <!-- <img src="../assets/avatar/0.jpg">
    <img src="../assets/avatar/0.jpg">
    <img src="../assets/avatar/0.jpg"> -->
  </van-tab>
  <van-tab title="做过最多">
     <ul>
        <li>
            <div><img src="../assets/avatar/1.jpg" alt=""></div>
            <div class="tow">
                <h3> &nbsp; &nbsp;小麦胚芽蒜香面包2</h3>
                <h6 style="margin: 10px 0 10px 0;">&nbsp; &nbsp; 小麦粉 麦芽 牛奶 牛奶 牛奶 牛奶2</h6>
                <p style="font-size: 12px; margin: 10px 0 10px 0;">&nbsp; &nbsp; 小麦胚芽蒜香面包2</p>
                <p style="font-size: 14px;">&nbsp; &nbsp; 182人做过 &nbsp; &nbsp;  65人收藏</p>
            </div>
        </li>
        <li>
            <div><img src="../assets/avatar/1.jpg" alt=""></div>
            <div class="tow">
                <h3> &nbsp; &nbsp;小麦胚芽蒜香面包2</h3>
                <h6 style="margin: 10px 0 10px 0;">&nbsp; &nbsp; 小麦粉 麦芽 牛奶 牛奶 牛奶 牛奶2</h6>
                <p style="font-size: 12px; margin: 10px 0 10px 0;">&nbsp; &nbsp; 小麦胚芽蒜香面包2</p>
                <p style="font-size: 14px;">&nbsp; &nbsp; 182人做过 &nbsp; &nbsp;  65人收藏</p>
            </div>
        </li>
    </ul>
  </van-tab>
  <van-tab title="达人食谱"></van-tab>
</van-tabs>
    </div>
</template>

<script>
   export default {
  data() {
    return {
      active: 0,
    };
  },
};
</script>

<style lang="scss" scoped>
*{
    margin: 0;
    padding: 0;
}
ul li div img {
    width: 30%;
    float: left;
    border-radius: 5px;
}
ul li {
height: 113px;
margin-top: 10px;
}
.tow{
  text-align: left;
}
</style>